<template>
	<view style="width:100%; height:100%;">
		<view class="center" style="margin-top: 15%;">
			<u-image :src="userFace" width="600rpx" height="600rpx" />
		</view>
		<view class="btn">
			<u-button type="primary" plain @click="changeFace">更换</u-button>
		</view>
	</view>
</template>

<script>
import config from "@/config";
import userFaceApi from "@/api/client/userFaceApi";

export default {
	data() {
		return {
			userFace: ''
		};
	},
	methods: {
		changeFace() {
			uni.chooseImage({
				count: 1,
				sizeType: "original",
				success: (res) => {
					const tempFilePaths = res.tempFilePaths;
					let accessToken = uni.getStorageSync("token");
					uni.uploadFile({
						url: config.baseUrl + '/client/c/userFace/uploadUserFace',
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							"token": accessToken,
						},
						success: _ => {
							this.getUserFace()
						}
					})
				}
			})
		},
		getUserFace() {
			userFaceApi.getUserFace().then(res => {
				this.userFace = res.msg;
			})
		}
	},
	onShow() {
		this.getUserFace();
	},
}
</script>

<style lang="scss">

.center {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
}

.btn {
	margin-top: 20%;
	margin-left: 120rpx;
	margin-right: 120rpx;
	padding: 36rpx;
	display: flex;
	flex-direction: column;
	gap: 36rpx
}

</style>
